<template>
	<view>
		<view id="main-map">
		</view>

		<view class="map-tools">
			<view class="tool-icon loc" @click="getLocation" />
			<view class="tool-icon lyr" @click="handleOpenLayers" />
		</view>
		<u-card v-if="cardShow" margin="5rpx 5rpx" class="map-card">
			<view class="map-card-header" slot="head">
				<uni-icons type="location-filled" size="20" color="#0055ff"></uni-icons>{{selcetedAddress}}
			</view>
			<view class="map-card-body" slot="body">
				未公布人数
			</view>
		</u-card>
		<layer-control-leaf :map="map" ref="layerControl" />
	</view>
</template>

<script>
	import L from "leaflet"
	import "leaflet/dist/leaflet.css"
	import "@ansur/leaflet-pulse-icon/dist/L.Icon.Pulse.js"
	import "@ansur/leaflet-pulse-icon/dist/L.Icon.Pulse.css"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import LayerControlLeaf from "./widgets/LayerControlLeaf.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import {
		LeafletMapClass
	} from './js/LeafletMapClass'
	import 'leaflet.markercluster'
	import 'leaflet.markercluster/dist/MarkerCluster.css'
	import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
	export default {

		components: {
			uniIcons,
			LayerControlLeaf,
			uniDrawer,
		},
		data() {
			return {
				map: null,
				cardShow: false,
				cardInfo: {},
				popup: null
			}
		},
		methods: {
			onShow() {
				if (this.map) this.map._map.invalidateSize(true);
			},
			initMap() {
				this.map.addVectorTileLayer({
					layerId: 'cite:geo_residential_gcj02',
					url: "http://129.204.173.206:8090/geoserver/gwc/service/tms/1.0.0/cite%3Ageo_residential_gcj02@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
					root: 'http://129.204.173.206:8090/geoserver/cite',
					idField: 'name',
					crs: 'EPSG:4326',
					vectorTileLayerStyles: {
						geo_residential_gcj02: {
							weight: 3,
							fillColor: '#ffff00',
							fill: true,
							fillOpacity: 0.2,
							color: '#ffaa00',
							opacity: 0.1,
						}
					}
				})
				this.map.addVectorTileLayer({
					layerId: 'cite:geo_school_gcj02',
					url: "http://129.204.173.206:8090/geoserver/gwc/service/tms/1.0.0/cite%3Ageo_school_gcj02@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
					root: 'http://129.204.173.206:8090/geoserver/cite',
					idField: 'name',
					crs: 'EPSG:4326',
					vectorTileLayerStyles: {
						geo_school_gcj02: {
							weight: 3,
							fillColor: '#ff557f',
							fill: true,
							fillOpacity: 0.2,
							color: '#ff007f',
							opacity: 0.1,
						}
					}
				})
				this.map.addLayerToMap('cite:geo_school_gcj02')
				this.map.addLayerToMap('cite:geo_residential_gcj02')
				this.getCovidData()
			},
			handleOpenLayers() {
				this.$refs.layerControl.open()
			},
			getCovidData() {
				this.map._layerDict['covidEvt'] = L.markerClusterGroup({
					spiderfyOnMaxZoom: false,
					showCoverageOnHover: false,
					zoomToBoundsOnClick: true
				});
				var data = require('@/static/data/data.json')
				var geoRes = []
				var myIcon = L.icon({
					iconUrl: require('@/static/icon/location.png'),
					iconSize: [34, 34]
				});
				var maker
				for (var i in data.community["上海市"]["上海市"]) {
					data.community["上海市"]["上海市"][i].map((item) => {
						maker = L.marker([item.lat, item.lng], {
							icon: myIcon,
							title: item.full_address,
							attr: {

							}
						})
						maker.on('click', (evt => {
							this.map._map.flyTo(evt.latlng, 16)
							this.selcetedAddress = evt.target.options.title
							this.cardInfo
							this.cardShow = true
						}))
						maker.on('popupclose', (evt) => {
							this.cardShow = false
						})
						maker.bindPopup(item.community)
						this.map._layerDict['covidEvt'].addLayer(maker);
					})
				}
			},
			handlePopClick(attrs) {
				uni.navigateTo({
					url: "/pages/landForm/LandForm?data=" + encodeURIComponent(JSON.stringify(attrs)),
				})
			},
			getLocation() {
				var pulsingIcon = L.icon.pulse({
					iconSize: [20, 20],
					color: 'yellow',
					fillColor: 'yellow'
				});
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.map._map.panTo([res.latitude, res.longitude]);
						L.marker([res.latitude, res.longitude], {
							icon: pulsingIcon
						}).addTo(this.map._map);
					},
					fail: () => {
						console.log('获取当前位置失败');
						this.map._map.panTo([31.205815, 121.455017]);
						L.marker([31.205815, 121.455017], {
							icon: pulsingIcon
						}).addTo(this.map._map);

					}
				})
			}

		},
		mounted() {
			this.map = new LeafletMapClass('main-map')
			this.initMap()
			this.map.on(
				'clickEnd',
				f => {
					document.getElementById("popup").onclick = () => {
						this.handlePopClick(f)
					}
				}
			)

		}

	}
</script>

<style lang="scss">

</style>
